<template>
  <div>
    <h1>toRefs</h1>
    <h2>{{ obj }}</h2>
    <button @click="handleClick">click</button>
  </div>
</template>

<script setup>
import { reactive, toRefs } from 'vue';

/**
 * reactive函数 - 创建响应式对象 他的参数一定要是对象
 * 1. 解构 有没有坑 - 丢失响应式 - 踩坑
 * 2. toRefs处理响应式 - 爬坑
 *      注意使用的是toRefs不是toRef 是带s的这个
 *      语法 他是一个函数 参数就是我们要解构的对象
 *      之后解构出来的属性 都是ref对象，如果想要取这个值，需要.value
 * 3. 函数的作用与使用场景
 */
const obj = reactive({
  name: 'zs',
  age: 18
})
// toRefs()
const {age} = toRefs(obj)
// console.log(age);
const handleClick = () => {
  age.value++
  console.log(age.value);
}
</script>

<style lang="scss" scoped></style>